/// <reference path="3rd/jquery.d.ts" />
/// <reference path="3rd/ace.d.ts" />
/// <reference path="settings.ts" />

interface IOptions {
    save();
    load();
    initialize();
}

module pages {
    export class Section {
        constructor (public element: JQuery, public menuitem: JQuery) { }

        public show() {
            this.menuitem.addClass('active');
            this.element.fadeIn();
        }

        public hide(callback?: any) {
            this.menuitem.removeClass('active');
            this.element.fadeOut(callback);
        }
    }

    // Class
    export class Options implements IOptions {
        private currentsection: Section;
        private sections: Section[];

        private cssEditor: any;
        private templateEditor: any;
        private functionEditor: any;

        constructor () { }

        save() {
            core.Settings.instance.project = $('#projectTitle').val();
            core.Settings.instance.css = this.cssEditor.getSession().getValue();
            core.Settings.instance.template = this.templateEditor.getSession().getValue();
            core.Settings.instance.itemfunction = this.functionEditor.getSession().getValue();
        }

        load() {
            $('#projectTitle').val(core.Settings.instance.project);
            this.cssEditor.getSession().setValue(core.Settings.instance.css);
            this.templateEditor.getSession().setValue(core.Settings.instance.template);
            this.functionEditor.getSession().setValue(core.Settings.instance.itemfunction);
        }

        initialize() {
            var sections = $('.sections section');
            var menu = $('.navigator ul')
            sections.each((i, e) =>{

                var sectionElm = $(e);
                var title = sectionElm.attr('title');
                var menuItem = $('<a href="javascript:void()">' + title + '</a>');
                var section = new Section(sectionElm, menuItem);
                menu.append($('<li></li>').append(menuItem));

                if (this.currentsection == null) {
                    this.currentsection = section;
                    section.show();
                } else {
                    section.element.hide();
                }

                menuItem.click(() =>{
                    if (section != this.currentsection) {
                        this.currentsection.menuitem.removeClass('active');
                        section.menuitem.addClass('active');

                        this.currentsection.element.fadeOut(() =>{
                            section.element.fadeIn();
                        });
                        this.currentsection = section;
                    }
                });
            });

            this.cssEditor = ace.edit("cssEditor");
            this.cssEditor.setTheme("ace/theme/chrome");
            this.cssEditor.getSession().setMode("ace/mode/css");

            this.templateEditor = ace.edit("templateEditor");
            this.templateEditor.setTheme("ace/theme/chrome");
            this.templateEditor.getSession().setMode("ace/mode/html");
            
            this.functionEditor = ace.edit("itemfunction");
            this.functionEditor.setTheme("ace/theme/chrome");
            this.functionEditor.getSession().setMode("ace/mode/javascript");

            this.load();

            $('#save').click(() => { this.save(); });
            $('#cancel').click(() => { this.load(); });
            $('#reset').click(() => { core.Settings.instance.clear(); this.load(); });

            $('.editorwrap').resize(() => {
                this.cssEditor.resize();
                this.templateEditor.resize();
                this.functionEditor.resize();
            });
        }
    }
}